<template>
  <a-card class="case_produce" :bordered="false">
    <a-spin tip="加载中..." :spinning="spinning">
      <div style="margin-bottom: 15px">
        <span class="add_form_label">{{ labelTitle }}</span>
        <span v-if="operateBtnShow">
          <a-button
            v-if="btnLabel"
            :disabled="!(assignFirstData.acceptfirstname || assignSecondData.acceptsecondname)"
            @click="startBusinessProcedClick"
            type="primary"
            class="add_form_btn btn_primary_color"
            :loading="processLoading"
          >
            {{ btnLabel }}
          </a-button>
        </span>
        <!-- 当前是编辑模式 -->
        <a-button
          v-if="isEditModel && uploadBtnShow"
          class="add_form_btn btn_normal_color"
          @click="addCustomerMaterial"
        >
          新增自定义材料
        </a-button>
        <a-divider />
      </div>
      <div style="height: 50px" v-if="busiName == Tp_proctypeEnum.accept_change_firstper.key">
        <a-col :span="4"> <span class="tip_label">承办人:</span></a-col>
        <a-col :span="18">
          <deptUserTree
            v-if="operateBtnShow"
            style="width: 250px"
            type="user"
            :multiple="false"
            :departId="Number(currentDept.id)"
            :checkedKeys="Array.of(currentDept.id)"
            :confirmBtnShow="false"
            @save="firstUserSave"
          ></deptUserTree>
          <a-input v-else style="width: 250px" :value="acceptfirstname" disabled></a-input>
        </a-col>
      </div>
      <div style="height: 50px" v-if="busiName == Tp_proctypeEnum.accept_change_secondper.key">
        <a-col :span="4"> <span class="tip_label">协办人:</span></a-col>
        <a-col :span="18">
          <deptUserTree
            v-if="operateBtnShow"
            style="width: 250px"
            type="user"
            :multiple="false"
            :departId="Number(currentDept.id)"
            :confirmBtnShow="false"
            @save="secondUserSave"
          ></deptUserTree>
          <a-input v-else style="width: 250px" :value="acceptsecondname" disabled></a-input>
        </a-col>
      </div>

      <a-list class="file_list" item-layout="horizontal" :data-source="fileItem">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta style="margin-top: 10px">
            <span slot="title">
              <div v-if="!item.isCustomer">
                <span v-if="item.required" style="color: red; padding-right: 5px; text-align: center">*</span>
                <span v-else style="padding-right: 10px"></span>
                <a-icon class="file_icon" slot="avatar" type="file-text" />
                <div class="file_title">
                  <span class="upload_span">{{ item.fileName }}</span>
                  <a-button
                    class="upload_btn btn_normal_color"
                    v-show="uploadBtnShow"
                    @click="showUploadModal(item, false)"
                  >
                    <a-icon type="upload" />上传</a-button
                  >
                </div>

                <div class="upload_list_div" v-for="(fileItem, index) in item.fileList" :key="index">
                  <a class="upload_list_dropdown ant-dropdown-link" @click="e => e.preventDefault()">
                    <a-icon type="link" style="font-size: 14px" />
                    <a
                      type="link"
                      class="upload_list_item_name beyond_hiding"
                      :title="fileItem.filename"
                      :key="index"
                      @click="fileItem.isEditor ? null : handleClick(fileItem, index)"
                      @dblclick.prevent="handleDoubleClick(fileItem, index)"
                    >
                      <!-- 添加重命名输入框，根据fileItem.isEditor状态显示 -->
                      <input
                        :ref="`input${index}`"
                        v-show="fileItem.isEditor"
                        type="text"
                        class="transparent-input"
                        v-model="newFilename"
                        :key="index"
                        ref="inputRef"
                        autofocus
                        @blur="saveFileName(fileItem)"
                        @keydown.enter="saveFileName(fileItem)"
                      />

                      <span v-show="!fileItem.isEditor">{{ fileItem.filename }}</span>
                    </a>
                    <a-dropdown :trigger="['click']">
                      <a
                        class="ant-dropdown-link"
                        style="display: inline-block; width: 100px;color: #000;"
                        @click="e => e.preventDefault()"
                        >操作<a-icon type="down" style="padding-left: 10px"
                      /></a>
                      <a-menu slot="overlay">
                        <a-menu-item>
                          <a style="display: block" @click="downloadFile(fileItem)">下载</a>
                        </a-menu-item>
                        <!-- <a-menu-item>
                          <a style="display: block" @click="fileView(fileItem)">预览</a>
                        </a-menu-item> -->
                        <a-menu-item>
                          <a style="display: block" @click="handleRemove(fileItem)">删除</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="weboffice(currentUser.userId, applyid, fileItem)"
                            >在线编辑</a
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="versionView(fileItem)">历史版本</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </a>
                </div>
              </div>
              <div v-else-if="item.isSaved && !item.isUpdated">
                <span style="padding-right: 10px"></span>
                <!-- <a-icon class="file_icon" slot="avatar" type="file-text" /> -->
                <div class="file_title">
                  <span class="upload_span">
                    {{ item.fileName }}
                    <a
                      style="margin-left: 10px; color: #0072c6"
                      class="upload_btn btn_normal_color"
                      v-show="uploadBtnShow && item.isSaved"
                      @click="showUploadModal(item, true)"
                    >
                      <a-icon type="upload" />&nbsp;上传</a
                    >
                    <a-divider type="vertical" />
                    <span style="color: #0072c6">
                      <a-icon
                        v-show="uploadBtnShow"
                        class="customer_icon"
                        @click="editCustomerMaterial(item)"
                        type="edit"
                      />&nbsp;编辑</span
                    >
                    <a-divider type="vertical" />
                    <a-popconfirm
                      title="确认删除自定义材料项吗？"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="deleteCustomer(item)"
                      class="left_icon"
                    >
                      <span style="color: #0072c6"
                        ><a-icon
                          v-show="uploadBtnShow"
                          class="customer_icon"
                          type="delete"
                        />&nbsp;删除</span
                      >
                    </a-popconfirm>
                  </span>
                </div>
                <div class="upload_list_div" v-for="(fileItem, index) in item.fileList" :key="index">
                  <a class="upload_list_dropdown ant-dropdown-link" @click="e => e.preventDefault()">
                    <a-icon type="link" style="font-size: 14px" />
                    <a
                      type="link"
                      class="upload_list_item_name beyond_hiding"
                      :title="fileItem.filename"
                      :key="index"
                      @click="fileItem.isEditor ? null : handleClick(fileItem, index)"
                      @dblclick.prevent="handleDoubleClick(fileItem, index)"
                    >
                      <!-- 添加重命名输入框，根据fileItem.isEditor状态显示 -->
                      <input
                        :ref="`input${index}`"
                        v-show="fileItem.isEditor"
                        type="text"
                        class="transparent-input"
                        v-model="newFilename"
                        :key="index"
                        ref="inputRef"
                        autofocus
                        @blur="saveFileName(fileItem)"
                        @keydown.enter="saveFileName(fileItem)"
                      />

                      <span v-show="!fileItem.isEditor">{{ fileItem.filename }}</span>
                    </a>
                    <a-dropdown :trigger="['click']">
                      <a
                        class="ant-dropdown-link"
                        style="display: inline-block; width: 100px;color: #000;"
                        @click="e => e.preventDefault()"
                        >操作<a-icon type="down" style="padding-left: 10px"
                      /></a>
                      <a-menu slot="overlay">
                        <a-menu-item>
                          <a style="display: block" @click="downloadFile(fileItem)">下载</a>
                        </a-menu-item>
                        <!-- <a-menu-item>
                          <a style="display: block" @click="fileView(fileItem)">预览</a>
                        </a-menu-item> -->
                        <a-menu-item>
                          <a style="display: block" @click="handleRemove(fileItem)">删除</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="weboffice(currentUser.userId, applyid, fileItem)"
                            >在线编辑</a
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="versionView(fileItem)">历史版本</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </a>
                </div>
              </div>
              <div class="customer_div" v-else-if="!item.isSaved || item.isUpdated">
                <span class="customer_span"> {{ !item.isSaved ? '新增:' : '修改:' }}</span>
                <a-input
                  class="customer_input"
                  ref="userNameInput"
                  v-model="item.fileName"
                  placeholder="请输入自定义材料名称"
                  :max-length="50"
                >
                  <!-- <a-icon slot="prefix" type="file-add" /> -->
                  <a-tooltip slot="suffix" title="材料名称长度上限50">
                    <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
                  </a-tooltip>
                </a-input>
                <div class="customer_icon_group" v-show="uploadBtnShow">
                  <a-popconfirm
                    title="确认撤销吗？"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="rollBackCustomerMaterial(item)"
                    class="left_icon"
                  >
                    <a-icon class="customer_icon" type="close" />
                  </a-popconfirm>
                  <a-popconfirm
                    title="确认保存吗？"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="saveCustomerMaterial(item)"
                    class="left_icon"
                  >
                    <a-icon class="customer_icon" style="margin-left: 20px" type="check" />
                  </a-popconfirm>
                </div>
              </div>
            </span>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-spin>

    <MultiUploadProduce
      ref="multiUploadProduce"
      :applyid="applyid"
      :busiType="busiType"
      :currentUser="currentUser"
      @afterUpload="queryMaterialsList"
    ></MultiUploadProduce>
    <MaterialVersion ref="materialVersionRef"></MaterialVersion>
  </a-card>
</template>
<script>
import { getTabByCategory } from '@/enumeration/Tp_category'
import { ProcedureMinxin } from '../ProcedureMinxin'
import { startBusinessProced } from '@/api/accept/business_Approve'
export default {
  mixins: [ProcedureMinxin],
  data () {
    return {
      assignFirstData: {},
      assignSecondData: {},
      isFirstPersonChange: true,
      // 详情页面使用
      acceptfirstname: undefined,
      acceptsecondname: undefined
    }
  },
  created () {
    console.log('busikey' + this.busiKey)
    this.initParam()
    this.acceptfirstname = this.$store.state.Processvariable.variableData.acceptfirstname || ''
    this.acceptsecondname = this.$store.state.Processvariable.variableData.acceptsecondname || ''
  },
  components: {
    deptUserTree: () => import('@/views/base/DeptUserTree.vue')
  },
  mounted () {},
  methods: {
    setButtonDisabled () {
      if (this.isEditModel) {
        // 是否是从编辑模式进入
        const tabCategory = getTabByCategory(this.category, this.busiKey)
        if (tabCategory == 'editAll') {
          this.operateBtnShow = true // 操作按钮展示
          this.uploadBtnShow = true // 上传按钮展示
        } else if (tabCategory == 'disabled') {
          this.operateBtnShow = false
          this.uploadBtnShow = true
        } else if (tabCategory == 'editOnlySelf') {
          this.operateBtnShow = false
          this.uploadBtnShow = true
        }
      } else {
        this.operateBtnShow = false
        this.uploadBtnShow = false
      }
      // FIXME: 临时放开
      this.uploadBtnShow = true
    },

    /**
     * 启动流程
     * @param {} busiName
     * @param {*} typeEnum
     */
    startBusinessProced (busiName, typeEnum) {
      // 启动流程
      const flowParams = {
        applyid: this.applyid, // applyid
        proctype: busiName, // 操作分类
        userid: this.currentUser.userId,
        username: this.currentUser.fullname,
        processinstanceid: this.processinstanceid, // 流程实例id
        cause: '', // 案由
        describe: typeEnum.name + '申请'
      }
      const docfield = {
        acceptfirstid: this.assignFirstData.acceptfirstid,
        acceptfirstname: this.assignFirstData.acceptfirstname,
        acceptsecondid: this.assignSecondData.acceptsecondid,
        acceptsecondname: this.assignSecondData.acceptsecondname
      }
      this.processLoading = true
      console.log('流程入参', flowParams)
      startBusinessProced(flowParams, docfield).then(res => {
        this.processLoading = false
        if (res.code !== 0) {
          this.$message.error('操作失败')
        } else {
          this.$message.success('操作成功')
          this.$emit('reload')
          this.$emit('close')
          this.modalVisible = false
          // 暂时隐藏流程跳转
          this.autoToSonRouter(res.data, busiName)
        }
      })
    },

    // 主办人保存
    async firstUserSave (obj) {
      // console.log('主办人', obj)
      if (obj.id) {
        this.assignFirstData = {}
        this.assignFirstData.acceptfirstid = obj.id
        this.assignFirstData.acceptfirstname = obj.name
        this.isFirstPersonChange = true
      } else {
        this.assignFirstData = {}
        this.$message.warning('未获取到主办人id')
      }
    },
    // 协办人保存
    async secondUserSave (obj) {
      // console.log('协办人', obj)
      if (obj.id) {
        this.assignSecondData = {}
        this.assignSecondData.acceptsecondid = obj.id
        this.assignSecondData.acceptsecondname = obj.name
        this.isFirstPersonChange = false
      } else {
        this.assignSecondData = {}
        this.$message.warning('未获取到协办人id')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/apply/caseProcedure.scss';
.transparent-input {
  background-color: transparent; /* 设置背景透明 */
  border: none; /* 移除边框 */
  border-bottom: 1px solid rgb(251, 251, 252); /* 可选：添加底部边框以提升可视度 */
  outline: none; /* 移除默认的输入框外观 */
  color: rgb(119, 166, 253); /* 设置文本颜色 */
  /* 可以根据需要添加更多样式 */
}
</style>
